<template>
  <div>
    <!-- 3.使用声明注册的局部组件-->
    <city-header></city-header>
    <!--Search这个组件接收到cities 的数据-->
    <city-search v-bind:cities="cities"></city-search>
    <!--监听并传递letter在下面的方法中接收到的值-->
    <city-list v-bind:cities="cities" v-bind:hot="hotCities" v-bind:letter="letter"></city-list>
    <!--监听Alphabet.vue 向外触发的事件名 change-->
    <city-alphabet v-bind:cities="cities" @change="handleLetterChange"></city-alphabet>
  </div>
</template>

<script>
  //引入htts网络请求
  import axios from 'axios'
  // 1. 在城市首页引入拆分的组件
  import CityHeader from './components/Header'
  import CitySearch from './components/Search'
  import CityList from './components/List'
  import CityAlphabet from './components/Alphabet'
  export default {
    name: "City",
    components: { // 2.用这个引入的组件 即注册组件
      CityHeader,
      CitySearch,
      CityList,
      CityAlphabet
    },
    data () {
      return {
        cities: {}, //定义一个数据 里面存放ABCD的城市名字 这是一个对象
        hotCities: [], //存着热门城市
        letter:'' //
      }
    },
    methods: { // B定义这个方法
      getCityInfo () {
        axios.get(process.env.API_HOST + '/web_site/city')
          .then(this.handleGetCityInfoSucc)
      },
      handleGetCityInfoSucc (res) {
        res = res.data
        //判断从后端中是否拿到正确的数据
        if (res.ret && res.data) {
          const data = res.data  //定义变量进行接收
          //一旦ajax 获取到数据 就需要在父组件中绑定显示出被改动的数据了
          this.cities =  data.cities
          this.hotCities = data.hotCities
        }
        console.log(res)
      },
      handleLetterChange (letter) {
        this.letter = letter
        console.log(letter)
      }
    },
    //A生命周期函数里面定义一个方法的调用
    mounted () {
      this.getCityInfo()
    }
  }
</script>

<style lang="stylus" scoped>

</style>
